'use client';
import React, { useState } from 'react';

const Calculator = () => {
  const [display, setDisplay] = useState('0');
  const [equation, setEquation] = useState('');
  const [prevNumber, setPrevNumber] = useState('');
  const [currentOperator, setCurrentOperator] = useState('');

  const handleNumber = (number: string) => {
    if (display === '0') {
      setDisplay(number);
    } else {
      setDisplay(display + number);
    }
  };

  const handleOperator = (operator: string) => {
    if (prevNumber === '') {
      setPrevNumber(display);
      setDisplay('0');
      setCurrentOperator(operator);
      setEquation(`${display} ${operator} `);
    } else {
      const result = calculate();
      setPrevNumber(result.toString());
      setDisplay('0');
      setCurrentOperator(operator);
      setEquation(`${result} ${operator} `);
    }
  };

  const calculate = () => {
    const prev = parseFloat(prevNumber);
    const current = parseFloat(display);
    let result = 0;

    switch (currentOperator) {
      case '+':
        result = prev + current;
        break;
      case '-':
        result = prev - current;
        break;
      case '×':
        result = prev * current;
        break;
      case '÷':
        result = prev / current;
        break;
      default:
        return current;
    }

    return Math.round(result * 1000000) / 1000000;
  };

  const handleEqual = () => {
    if (prevNumber !== '' && currentOperator !== '') {
      const result = calculate();
      setDisplay(result.toString());
      setEquation('');
      setPrevNumber('');
      setCurrentOperator('');
    }
  };

  const handleClear = () => {
    setDisplay('0');
    setEquation('');
    setPrevNumber('');
    setCurrentOperator('');
  };

  const handleDecimal = () => {
    if (!display.includes('.')) {
      setDisplay(display + '.');
    }
  };

  const buttonClass = "p-4 text-white rounded-lg transition-colors";
  const numberClass = `${buttonClass} bg-gray-700 hover:bg-gray-600`;
  const operatorClass = `${buttonClass} bg-orange-500 hover:bg-orange-400`;

  return (
    <div className="w-80 mx-auto bg-gray-800 rounded-2xl p-5 shadow-2xl">
      <div className="mb-4">
        <div className="text-gray-400 text-right h-6 text-sm">{equation}</div>
        <div className="text-white text-right text-4xl font-semibold overflow-hidden">{display}</div>
      </div>
      <div className="grid grid-cols-4 gap-2">
        <button onClick={handleClear} className={`${numberClass} col-span-2`}>AC</button>
        <button onClick={() => handleOperator('÷')} className={operatorClass}>÷</button>
        <button onClick={() => handleOperator('×')} className={operatorClass}>×</button>
        
        <button onClick={() => handleNumber('7')} className={numberClass}>7</button>
        <button onClick={() => handleNumber('8')} className={numberClass}>8</button>
        <button onClick={() => handleNumber('9')} className={numberClass}>9</button>
        <button onClick={() => handleOperator('-')} className={operatorClass}>-</button>
        
        <button onClick={() => handleNumber('4')} className={numberClass}>4</button>
        <button onClick={() => handleNumber('5')} className={numberClass}>5</button>
        <button onClick={() => handleNumber('6')} className={numberClass}>6</button>
        <button onClick={() => handleOperator('+')} className={operatorClass}>+</button>
        
        <button onClick={() => handleNumber('1')} className={numberClass}>1</button>
        <button onClick={() => handleNumber('2')} className={numberClass}>2</button>
        <button onClick={() => handleNumber('3')} className={numberClass}>3</button>
        <button onClick={handleEqual} className={operatorClass}>=</button>
        
        <button onClick={() => handleNumber('0')} className={`${numberClass} col-span-2`}>0</button>
        <button onClick={handleDecimal} className={numberClass}>.</button>
      </div>
    </div>
  );
};

export default Calculator;
